今日要點
》介紹 Best-Flutter-UI-Templates 專案
》下載並編譯 Best-Flutter-UI-Templates 專案

介紹 Best-Flutter-UI-Templates 專案

今天要介紹一個推坑度蠻強的專案，mitesh77/Best-Flutter-UI-Templates 一看到這個專案名，就知道他的野心，不過成果也確實如同專案名，UI真的有點美。9.1K 的星星，也代表大家的觀注度。

在 README.md 的內容，沒寫什麼說明，除了把專案運作的畫面截圖下來，就只寫了一句話

"completely free for everyone. Its build-in Flutter Dart."

超霸氣的，完全免費，拿去用吧!!!

這怎麼能不好好的研究一下呢。

先看看他 README.md 裡的運行畫面

第一張圖，他的亮點很吸引我，你可以注意到，當它在開關左側頁時，左上的漢堡圖示，與頭像，還有選單的背景長度，同步在變動，他在動圖中一開始還特別拉慢動作讓你感覺到這個效果，怕你沒注意到，哈。如果動太快你沒看清楚，我幫你截圖下來了，下面6格可以看到他的變化。

他目前有三種版面的設計，每一種都設計感十足，值得好好研究。
　　

下載並編譯 flutter_layout_article 專案

所以我們就來練習編譯一下看看有沒有問題。

那麼我們就開始下載並且建立這個 Best-Flutter-UI-Templates 專案囉。

% git clone https://github.com/mitesh77/Best-Flutter-UI-Templates.git

Cloning into 'Best-Flutter-UI-Templates'...
remote: Enumerating objects: 42, done.
remote: Counting objects: 100% (42/42), done.
remote: Compressing objects: 100% (37/37), done.
remote: Total 758 (delta 20), reused 13 (delta 3), pack-reused 716
Receiving objects: 100% (758/758), 134.27 MiB | 5.94 MiB/s, done.
Resolving deltas: 100% (324/324), done.

% cd Best-Flutter-UI-Templates
% cd best_flutter_ui_templates
% flutter pub get

Running "flutter pub get" in best_flutter_ui_templates...     0.3s

試 build 一下，iOS 都成功了，但2台 Android 模擬器有問題, 查看一下 Error 的訊息。

% flutter run -d all

ERROR: dump failed because resource AndroidManifest.xml not found
No application found for TargetPlatform.android_x86.
Is your project missing an android/app/src/main/AndroidManifest.xml?
Consider running "flutter create ." to create one.

好吧，清除之前的暫存檔，重來一次

 % flutter clean

Cleaning Xcode workspace... 1.8s
Deleting build... 99ms
Deleting .dart_tool... 5ms
Deleting Generated.xcconfig... 0ms
Deleting flutter_export_environment.sh... 0ms
Deleting App.framework... 7ms

再 build 一次，嗯，Android 模擬器還是有一台有點問題！！，改天再查，build.gradle

% flutter run -d all

三台畫面不一樣，是我自己點的，不要誤會 XD

程式架構研究

Main.dart : MaterialApp

Navigation_home_screen.dart : Scaffold

MaterialApp & Scaffold 這二個前面有提到，很熟悉的詞吧，改天我們再好好看程式。

今天就先這樣吧。

好，第6天，寫完。